<template>
	<div id="foot">
		<tabbar class="footer">
			<tabbar-item link="/VoteActivity" class="tab_item" :selected="$route.name === 'VoteActivity'">
				<img slot="icon" src="../assets/images/home/active_home_off.png">
				<img slot="icon-active" src="../assets/images/home/active_home_on.png">
				<span slot="label">首页</span>
			</tabbar-item>

			<tabbar-item link="/VoteRank" class="tab_item" :selected="$route.name === 'VoteRank'">
				<img slot="icon" src="../assets/images/home/active_list_off.png">
				<img slot="icon-active" src="../assets/images/home/active_list_on.png">
				<span slot="label">排行</span>
			</tabbar-item>
			<tabbar-item :link="'/EnrollOffice/vote_id/' + vote_id" class="tab_item" :selected="$route.name === 'EnrollOffice'">
				<img slot="icon" src="../assets/images/home/active_enroll_off.png">
				<img slot="icon-active" src="../assets/images/home/active_enroll_on.png">
				<span slot="label">报名</span>
			</tabbar-item>
			<tabbar-item link="/VotePrice" class="tab_item" :selected="$route.name === 'VotePrice'">
				<img slot="icon" src="../assets/images/home/active_rule_off.png">
				<img slot="icon-active" src="../assets/images/home/active_rule_on.png">
				<span slot="label">规则</span>
			</tabbar-item>
			<tabbar-item link="/LuckDraw" class="tab_item" :selected="$route.name === 'LuckDraw'">
				<img slot="icon" src="../assets/images/home/active_prize_off.png">
				<img slot="icon-active" src="../assets/images/home/active_prize_on.png">
				<span slot="label">抽奖</span>
			</tabbar-item>
		</tabbar>
	</div>
</template>

<script>
	import $ from 'jquery'
	import { Tabbar, TabbarItem } from 'vux'
	export default { //变量
		data() {
			return {
				index: 0,
				details:'',
				vote_id:'1'
			}
		},
		components: {
			Tabbar,
			TabbarItem
		},
		methods:{
			getVoteDetail: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/vote/details.json?vote_id=' + this.vote_id
				}).then((result) => {
					if(result.data.code == 1) {
						this.details = result.data.data;
					}
				}).catch((err) => {

				})
			},
		}
	}
</script>

<style>
	.footer {
		position: fixed!important;
	}
	
	.footer .tab_item.active {
		color: #a30000;
	}
</style>